<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<el-tabs v-model="activeName">
			
			<el-tab-pane label="运费模版" name="second">
				<div>
					<el-button type="primary" size="mini"
					@click="openModal(false)">添加模版</el-button>
				</div>
				<el-table border class="mt-3" :data="tableData" style="width: 100%">
					<el-table-column label="模版名称" prop="name" align="center">
					</el-table-column>
					<el-table-column label="计费方式" align="center" width="150">
						<template slot-scope="scope">
							{{ scope.row.type | formatType}}
						</template>
					</el-table-column>
					<el-table-column prop="order" label="排序" align="center" >
						
					</el-table-column>
				
					<el-table-column label="操作" width="250">
						<template slot-scope="scope">
							<el-button type="text" size="mini"
							@click="openModal(scope.$index)"
							>修改</el-button>
							<el-button type="text" size="mini"
							@click="openDrawer(scope.row)"
							>配置模版({{scope.row.express_values.length}})</el-button>
							<el-button type="text" size="mini"
							@click="deleteItem(scope.row)"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="物流跟踪" name="third">
				<el-form ref="form" :model="form" label-width="130px">
					
					<el-form-item label="快递100Customer">
						<el-input style="width: 50%;"
						size="mini" 
						v-model="form.customer" 
						placeholder="快递100Customer"></el-input>
						<small class="text-secondary d-block">用户查询物流信息<a href="#">快递100申请</a></small>
					</el-form-item>
					<el-form-item label="快递100key">
						<el-input style="width: 50%;"
						size="mini" 
						v-model="form.key" 
						placeholder="快递100key"></el-input>
					</el-form-item>
					
				</el-form>
			</el-tab-pane>
		</el-tabs>
		
		<div style="height: 60px;"></div>
		<el-footer class="d-flex border-top align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 10;">
			<div class="px-2" style="flex: 1;">
				<el-pagination
				 @size-change="handleSizeChange" 
				 @current-change="handleCurrentChange" 
				 :current-page="page.current"
				 :page-sizes="page.sizes" 
				 :page-size="page.size" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="page.total">
				</el-pagination>
			</div>
		</el-footer>
		
		<!-- 新增运费模版model -->
		<el-dialog :title="editIndex === -1 ? '添加模版' : '修改模版'" 
		:visible.sync="createModal" top="5vh" width="80%">
			<el-form ref="form" :model="modal" label-width="80px" >
				
				<el-form-item label="模版名称" prop="name" >
					<el-input v-model="modal.name" size="mini"
					style="width: 25%;"
					></el-input>
					<small class="text-secondary d-block" style="line-height: 1;">设置等级名称</small>
				</el-form-item>
				<el-form-item label="排序" prop="level">
					<el-input v-model="modal.order" type="number"
					placeholder="排序" size="mini"
					style="width: 25%;"></el-input>
				</el-form-item>
				<el-form-item label="收费类型" prop="status">
					<el-radio-group v-model="modal.type" size="mini">
						<el-radio :label="1" border>按重量</el-radio>
						<el-radio :label="0" border>按件数</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="createModal = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-drawer size="70%"
		:visible.sync="drawer"
		:with-header="false">
			<div class="p-3">
				<el-table border class="mt-3" :data="express_values" style="width: 100%">
					<el-table-column label="ID" prop="id" align="center">
					</el-table-column>
					<el-table-column label="可配送区域" align="center" width="200">
						<template slot-scope="scope">
							<el-cascader
								size="mini"
							    :options="options"
							    :props="props"
							    collapse-tags
								v-model="scope.row.region"
								@change="change(scope.row)"
							    clearable></el-cascader>
						</template>
					</el-table-column>
					<el-table-column label="首件(个)/首重(kg)" align="center" width="180">
						<template slot-scope="scope">
							<el-input type="number"
							size="mini"
							@change="change(scope.row)"
							v-model="scope.row.first"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="运费(元)" align="center" width="150">
						<template slot-scope="scope">
							<el-input type="number"
							size="mini"
							@change="change(scope.row)"
							v-model="scope.row.first_price"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="续件(个)/续重(kg)" align="center" width="150">
						<template slot-scope="scope">
							<el-input type="number"
							size="mini"
							@change="change(scope.row)"
							v-model="scope.row.add"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="续费(元)" align="center" width="150">
						<template slot-scope="scope">
							<el-input type="number" 
							size="mini"
							@change="change(scope.row)"
							v-model="scope.row.add_price"></el-input>
						</template>
					</el-table-column>
				
					<el-table-column label="操作" width="100">
						<template slot-scope="scope">
							<el-button type="text" size="mini"
							@click="deleteValue(scope.row, scope.$index)"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				
				<el-button type="primary" class="mt-3"
				@click="addValue">添加策略</el-button>
			</div>
			
		</el-drawer>
	</div>
</template>

<script>
	import common from "@/common/mixins/common.js";
		
	export default {
		mixins:[common],
		
		inject: ['app', 'layout'],
		
		
		
		data() {
			return {
				drawerId: 0,
				express_values: [],
				
				drawer: false,
				
				preUrl: 'express',
				
				activeName: 'second',
				
				form: {
					customer: '',
					key: '',
					
				},
				
				//当前编辑的索引
				editIndex: -1,
				createModal: false,
				modal: {
					name: '',
					order: 50,
					type: 0
				},
				
				/**
				 * 
					{
						name:'全国包邮',
						type: 1,
						order: 100
					},
				 */
				tableData: [],
				
				props: {
					multiple: true,
					label: 'name',
					value: 'name'
				},
				options: []
			}
		},
		
		filters: {
			formatType: function(value) {
				let arr = ['按件数', '按重量']
				return arr[value]
			}
		},
		
		methods: {
			//监听输入框修改
			change(item) {
				this.layout.showLoading()
				item.express_id = this.drawerId
				this.axios.post('/admin/express_value/' + item.id, item , {token: true}).then(res => {
					console.log(res)
				}).catch(err => {
					
				})
			},
			
			//删除
			deleteValue(item, index) {
				this.layout.showLoading()
				this.axios.post('/admin/express_value/' + item.id + '/delete', {},
				{token: true}).then(res => {
					this.express_values.splice(index, 1)
					this.$message({
						message: '删除成功',
						type: 'success'
					});
				}).catch(err => {
					
				})
			},
			
			//添加运费模版策略
			addValue() {
				this.layout.showLoading()
				this.axios.post('/admin/express_value', {
					first: 0,
					first_price: 0,
					add: 0,
					add_price: 0,
					express_id: this.drawerId,
					region: ['全国', '所有', '所有']
				}, {token: true}).then(res => {
					console.log(res)
					let data = res.data.data
					this.express_values.push(data)
				}).catch(err => {
					
				})
			},
			//打开抽屉
			openDrawer(item) {
				this.express_values = item.express_values
				this.drawerId = item.id
				this.drawer = true
			},
			
			getListResult(e) {
				this.tableData = e.list
				this.options = e.area.map(item => {
					item.children = item.citys.map(v => {
						v.children = v.districts
						return v
					})
					return item
				})
			},
			
			//新增
			submit() {
				let id = 0
				if(this.editIndex !== -1) {
					id  = this.tableData[this.editIndex].id
				}
				this.addOrEdit(this.modal, id)
				this.createModal = false
			},
			
			//打开弹出框
			openModal(index) {
				//新增
				if(index === false) {
					this.modal =  {
						name: '',
						order: 50,
						type: 0
					}
					this.editIndex = -1
					return this.createModal = true
				}
				//修改
				let item = this.tableData[index]
				this.modal = {
					name: item.name,
					order: item.order,
					type: item.type
				}
				this.editIndex = index
				this.createModal = true
			},
		}
	}
</script>

<style>
</style>
